import React from 'react';
import { Modal, Transfer } from 'antd';

// TODO 待定
const TransferModal = ({ props = {} }) => {
    const { title, width, visible, data, selected, target, setTarget, setSelected, isOpenDialog } = props;

    const onSubmitHandler = () => {

    }

    const onCancelHandler = () => {
        isOpenDialog();
    }

    const onChange = (keys) => {
        setTarget(keys);
    }

    const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
        setSelected([...sourceSelectedKeys, ...targetSelectedKeys]);
    };

    return (
        <Modal
            title={title}
            width={width}
            open={visible}
            onOk={onSubmitHandler}
            onCancel={onCancelHandler}
            bodyProps={{ style: { padding: '12px 12px 0' } }}
        >
            <Transfer
                dataSource={data}
                titles={['待选', '已选']}
                targetKeys={target}
                selectedKeys={selected}
                onChange={onChange}
                onSelectChange={onSelectChange}
                // onScroll={onScroll}
                render={item => item.title}
            />
        </Modal>
    )
}

export default TransferModal;